<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>健康上报</title>
    <script src="js/jquery.js" type="text/javascript"></script>
    <script src="bootstrap/js/bootstrap.js" type="text/javascript"></script>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
    <script src="layui/layui.js"></script>
    <link rel="stylesheet" href="layui/css/layui.css">
    <style>
        body{
            margin-top: 0;
            padding: 30px;
        }
    </style>
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>健康上报</legend>
</fieldset>

<form id="uploadForm" class="layui-form" action="findReportProvince" enctype="multipart/form-data" method="post">
    <input type="hidden" name="userid" th:value="${session.user.id}">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label" style="width: 100px;">上报用户</label>
            <div class="layui-input-block">
                <input type="text" name="name" readonly th:value="${session.user.name}" lay-verify="nameV" autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label" style="width: 100px;">是否咳嗽</label>
        <div class="layui-input-block">
            <input type="radio" name="cough" value="y" title="咳嗽">
            <input type="radio" name="cough" value="n" title="不咳嗽" checked>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" style="width: 100px;">体温</label>
        <div class="layui-input-block">
            <input type="radio" name="temperature" value="y" title="大于37.3°C">
            <input type="radio" name="temperature" value="n" title="小于37.3°C" checked>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label" style="width: 100px;">出发地区</label>
            <div class="layui-input-block">
                <input type="text" name="departurearea" autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label" style="width: 100px;">到达地区</label>
            <div class="layui-input-block">
                <input type="text" name="arrivalarea" autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>

    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label" style="width: 100px;">详细地址</label>
        <div class="layui-input-block">
            <input name="address" placeholder="请输入到达住处详细地址"  class="layui-textarea">
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">保存修改</button>
            <button type="reset" lay-filter="resetF" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<script>
    layui.use(['form', 'util', 'laydate'], function(){
        var form = layui.form;
        var layer = layui.layer;
        var util = layui.util;
        var laydate = layui.laydate;

        //日期
        laydate.render({
            elem: '#date',
            type: 'datetime'
        });
        //自定义验证规则
        form.verify({
            nameV: function(value){
                if(value.length < 2||value.length>6){
                    return '姓名长度2-6位';
                }
            },
            detailedAddress:[
                /^[省][市][县区]$/
                ,'地址格式xx省xx市xx县/区....'
            ]
        });

        // 提交事件
        form.on('submit(demo1)', function(data){
            $.ajax({
                url: '/addHealthreport',
                type: 'post',
                data: $("#uploadForm").serialize(),
                success: function (result) {
                    if(result=='SUCCESS'){   //登录成功
                        layer.alert("上报成功",{icon:1});
                    }else{   //登录失败
                        layer.alert('上报失败!',{icon:2});
                    }
                }
            });
            return false;  //阻止表单跳转
        });
    });
</script>
</body>
</html>